<template>
  <div class="menu">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in menulist" :key="index"> -->
              {{item.name}}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <router-view  />
    <el-menu
  :collapse-transition="false"
  unique-opened
  router
  background-color="#333"
  text-color="skyblue"
  active-text-color="blue">
  <!-- 一级菜单 -->
  <el-submenu :index="item.path" v-for="(item, index) in menulist" :key="index">
   <!-- 一级菜单模板 -->
   <template slot="title" class="icon">
    <!-- 图标 -->
    <i :class=" item.icon "
      style="margin-left:-7px;">
    </i>
    <!-- 文本 -->
    <span>{{ item.name }}</span>
    </template>
    <!-- 二级菜单 -->
    <el-menu-item :index="item.path"
     v-for="(item, index) in item.children" :key="index">
     <!-- 二级菜单模板 -->
     <template slot="title">
     <!-- 图标 -->
     <i class="el-icon-menu"></i>
     <!-- 文本 -->
     <span>{{ item.name }}</span>
     </template>
    </el-menu-item>
  </el-submenu>
</el-menu>
          
  </div>
</template>

<script>

export default {
  data() {
    // 这里存放数据
    return {
      menulist: this.$store.state.menuList
    }
  },
  computed: {},
  watch:{
    $route:{
        handler(newRouter){
            this.curTagName=newRouter.name;
        },
        immediate: true
    }
  },
  methods: {
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.$store.dispatch('getRole')
    // console.log(this.menulist)
    // console.log(this.$router)
  }
}
</script>
<style lang="css" scoped>
.menu {
  background-color: rgba(0,0,0,0.1)
}
.el-menu{
  width:20%
}
</style>
